<template>
  <div>
    <el-button v-for="({ title, fulfill, ...kwargs }, index) in buttons"
               :key="index"
               v-bind="kwargs"
               @click="handleClick(fulfill, index)">
      {{ title }}
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'CustomButtons',
  props: {
    value: {
      type: Array,
      default: () => []
    },
    scope: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {

    }
  },
  computed: {
    buttons () {
      return (this.value || []).filter(({ hidden }) => {
        return !hidden;
      });
    }
  },
  methods: {
    handleClick (fulfill, index) {
      if (typeof fulfill === "function") {
        fulfill(this.buttons[index]);
      }
      this.$emit("click", this.buttons[index], this.scope.$index, this.scope.row);
    }
  }
}
</script>

<style>
</style>